import React, { useState } from 'react';
import { Form, Input, Button, Modal, Descriptions } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data'
import { getMerchantList } from './service'
import TableTitle from '../../components/TableTitle'

export default () => {
  const { TextArea } = Input;
  // 查看模态框控制
  const [isCheckDetailInfoModal, setIsCheckDetailInfoModal] = useState(false);

  // 冻结模态框控制
  const [isFrozenModal, setIsFrozenModal] = useState(false);
  // 确认 获取原因表单
  const reasonFormRef: any = React.createRef();

  // 处理冻结
  const handleFrozenInfoOk = async () => {
    // 获取新增表单的值
    var reponse = reasonFormRef.current?.getFieldsValue()
    console.log(reponse);
    // 表单验证
    reasonFormRef.current.validateFields().then(() => {
      // 重置表单
      reasonFormRef.current.resetFields();
      // 关闭冻结模态框
      setIsFrozenModal(false)
    }).catch(() => { })
  }

  // 触发表单验证
  const handleOk = async () => {
    // 获取新增表单的值
    var reponse = reasonFormRef.current?.getFieldsValue()
    console.log(reponse);
    // 表单验证
    reasonFormRef.current.validateFields().then(() => {
      // 重置表单
      reasonFormRef.current.resetFields();
      // 关闭模态框
      setIsFrozenModal(false)
    }).catch(() => { })
  }

  // 储存当前查看数据
  const [merchant, setMerchant] = React.useState({})
  // 表头数据
  const columns: ProColumns<columnsDataType>[] = columnsData

  // 操作行数据 自定义操作行
  const actionRender: any = (text: any, record: any, index: number) =>
    <ul className="ant-list-item-action" style={{ margin: 0 }}>
      <li>
        <a onClick={() => { checkDetailInfo(record.merchantName) }}>查看</a>
        <em className="ant-list-item-action-split"></em>
      </li>
      <li>
        <a onClick={() => { frozenInfo() }} className="ant-dropdown-trigger">冻结</a>
      </li>
    </ul>
  // 自定义数据的表格头部数据
  columns.forEach((item: any) => {
    item.dataIndex === 'action' ? item.render = actionRender : undefined
  });

  // 查看 这里模拟查看的数据是通过接口获取的情况 merchantName传入的参数=查询操作
  const checkDetailInfo = async (merchantName: string) => {
    const merchant = await getMerchantList({ merchantName })
    setMerchant(merchant.data[0])
    setIsCheckDetailInfoModal(true)
  }

  // 冻结
  const frozenInfo = () => {
    setIsFrozenModal(true)
  }

  return (
    <div>
      {/* Pro表格 */}
      <ProTable<columnsDataType>
        headerTitle={<TableTitle title='会员管理' />}
        bordered
        // 表头
        columns={columns}
        // 请求获取的数据
        request={
          async params => getMerchantList(params)
        }
        rowKey="id"
        // 本地存储表格列的显示数据
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
        }}
        // 搜索框配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单的配置
        form={{
          ignoreRules: false,
        }}
        pagination={{
          pageSize: 5,
        }}
        dateFormatter="string"
      />
      {/* 查看模态框 */}
      <Modal
        title="会员信息"
        width={1000}
        centered
        footer={<Button type="primary" htmlType="submit" onClick={() => setIsCheckDetailInfoModal(false)}>
          确认
        </Button>}
        visible={isCheckDetailInfoModal}
        onCancel={() => setIsCheckDetailInfoModal(false)}
      >
        <Descriptions
          column={{ xxl: 4, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }}
        >
          <Descriptions.Item label="会员名">{merchant.merchantName}</Descriptions.Item>
          <Descriptions.Item label="会员号">{merchant.merchantNumber}</Descriptions.Item>
          <Descriptions.Item label="昵称">{merchant.contacts}</Descriptions.Item>
          <Descriptions.Item label="邮箱">{merchant.mailbox}</Descriptions.Item>
          <Descriptions.Item label="客户号"> </Descriptions.Item>
          <Descriptions.Item label="会员状态"> </Descriptions.Item>
          <Descriptions.Item label="注册日期"> </Descriptions.Item>
          <Descriptions.Item label="电话"> </Descriptions.Item>
        </Descriptions>
      </Modal>
      {/* 冻结模态框 */}
      <Modal
        title={<div><span>户名</span><span style={{ marginLeft: 20 }}>商户号</span></div>}
        centered
        visible={isFrozenModal}
        onOk={handleFrozenInfoOk}
        onCancel={() => setIsFrozenModal(false)}
      >
        <Form
          name="basic"
          ref={reasonFormRef}
          wrapperCol={{ span: 24 }}
          autoComplete="off"
        >
          <Form.Item
            key="refusalCause"
            name="refusalCause"
            rules={[{ required: true, message: '请填写原因' }]}
          >
            <TextArea rows={4} placeholder="请输入原因" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};